<template>
  <div class="payinfo_part">
    <!-- 搜索组件 -->
    <Searcha :plh_a="placeholdera" :plh_b="placeholderb" :url="addurl" :name="name" :enterSearch="showSearch"></Searcha>
    <!-- 表格 -->
    <el-table
	border
	ref="multipleTable"
	:data="tableData"
	tooltip-effect="dark"
	style="width: 100%"
	@selection-change="handleSelectionChange"
    >
    <el-table-column align="center" type="selection" width="55"> </el-table-column>
    <el-table-column align="center" prop="code" label="终端号" width="200" sortable></el-table-column>
    <el-table-column align="center" prop="type" label="支付方式" width="200" sortable> </el-table-column>
    <el-table-column align="center" prop="name" label="显示名称" sortable width="200"></el-table-column>
    <el-table-column align="center" prop="state" label="状态" width="200" sortable> </el-table-column>
    <el-table-column align="center" prop="time" label="修改时间" width="200" sortable> </el-table-column>
    <el-table-column align="center" label="操作" width="300">
        <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            <el-button size="mini" type="primary" @click="sercet(scope.$index, scope.row)">加密</el-button>

		</template>
    </el-table-column>
    </el-table>
	<!-- 编辑弹窗 -->
	<Dialog :list="list" :url="url" :name="name"></Dialog>

    <!-- 分页组件 -->
    <Pagination :num="lists.length" :router="router"></Pagination>
  </div>
</template>



<style lang="scss">
	.el-table {
		.el-table_1_column_6 {
			.cell {
				text-align: center;
			}
		}
	}
</style>




<script>
import Pagination from "@c/Pagination";
import Searcha from "@c/Searcha";
import Dialog from "@c/Dialog";

export default {
  components: { Searcha, Pagination, Dialog },
  data() {
    return {
		title: "支付配置信息",
		placeholdera: "请输入显示名称",
		placeholderb: "请输入终端号",
		tableData: [],
		lists: [],
		list: {},
		// 修改接口
		url: '/pay/payinfo/updata',
		addurl: '/pay/payinfo/add',
		name: [ '显示名称','终端号', ],
		// 弹窗
		dialog: false,
		// 路由
		router: '/pay/payinfo/',
		// 请求数据
		get:  '/pay/payinfo',
		gets: '/pay/payinfos',
		// 删除
		delete: '/pay/payinfo/delete',
    };
  },
  created() {
    this.$store.commit("title", this.title);
	
    this.$store.commit('dialog', this.dialog)
	this.getData();
	this.getDatas();

	
  },
	computed: {
		keyWord() {
			return this.$store.state.keyWord
		}
	},

  methods: {
	showSearch(val) {
        // console.log(val);
        this.$store.commit('updataSearch', val)
    },

	// 请求数据的方法
	getData() {
		let { params } = this.$route
		this.$http.get(this.get, { params })
			.then(({data}) => {
				this.tableData = data
			})
			
	},
	getDatas() {
		this.$http.get(this.gets)
			.then(({data}) => {
				this.lists = data
			})
			
	},

	handleSelectionChange () {
		
	},
	// 加密
	sercet() {
		this.$confirm('确定要加密吗？', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
				this.$message({
					type: 'success',
					message: '已加密'
			});          
			
		})
	},
	//   编辑
	handleEdit(index, data) {
    	this.$store.state.dialog = true;
		// console.log(data);
		this.list = data;
	},
	//   删除
	handleDelete(index, data) {
		// console.log(data);
		this.$confirm('确定要删除吗？', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		})
		.then(() => {
			this.$http.get(this.delete, { params: {_id: data._id}})
				.then(({ data }) => {
					if(!data.errno) {
						this.$message({
							message: data.msg,
							type: 'success'
						})
						setTimeout(() => {
							this.$router.go(0)
						},1000)
					}
				})
			}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});          
				});
	}
	  
  },
	watch: {
		$route() {
			this.getData()
		},
		keyWord(value) {
			this.$http.get('/search', {
				params: {
					value,
					coll: 'payinfo',
				}
			}).then(({data}) => {
				if(!data.msg) {
					this.tableData = data
					this.lists = data
				}else {
					this.$message.error(data.msg)
				}            
			})

		}
	},

};
</script>





